<template>
  <div class="main-canvas">
    <el-button
      class="buttonLeft" type="warning" icon="el-icon-arrow-left"
      @mouseover.native="handleHover"
      @mouseout.native="handleOut"
      @click="handleMinus"
    ></el-button>
    <el-button
      class="buttonRight" type="warning" icon="el-icon-arrow-right"
      @mouseover.native="handleHover"
      @mouseout.native="handleOut"
      @click="handleAdd"
    ></el-button>
    <div class="lineCanvas">
      <div class="innerCanvas" :style="{ left: leftLong + 'px' }">
        <div v-for="item in textList" :key="item.title" class="itemCanvas" @mouseover="handleHover" @mouseout="handleOut">
          <div class="title">{{ item.title }}</div>
          <p v-html="item.text"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "timeLine",
  data() {
    return {
      textList: [
        { title: '2021', text: '完成辽宁省卫健委开展的干保系统升级项目二期建设。项目涉及沈阳室22家三级甲等医院。<br><br>为全市医疗药品，项目目录，报销事宜提供全面、科学的信息化升级。'},
        { title: '2020', text: '完成辽宁省卫健委开展的干保系统升级项目一期建设。<br><br>完成大连医科大学附属新华医院信息化系统升级，以及互联网医院四级评审。<br><br>推出产品化健康管理平台，用以非在院患者健康管理。'},
        { title: '2019', text: '全面开发健康管理平台系统<br><br>与中国医科大学附属第四医院曹吉龙等专家研讨系统需求。<br><br>与中国医科大学附属第四医院干保科许蕾主任研讨干保患者需求。'},
        { title: '2018', text: '公司成立。<br><br>公司命名 医惠科技(沈阳)有限公司。'},
        { title: '2017', text: '公司雏形孵化中。<br><br>领导与合伙人见面研究公司成立事宜'},
        { title: '2016', text: '领导决定创立独立公司。'},
        { title: '2015', text: '领导在思创医惠取得良好业绩。<br><br>领导升职至区域负责人。'},
        { title: '2014', text: '领导加入杭州思创医惠有限公司。'}
      ],
      leftLong: 0,
      interval: undefined
    }
  },
  mounted() {
    this.interval = setInterval(this.moveItem, 2000)
  },
  methods: {
    moveItem() {
      if (this.leftLong !== -1000) {
        this.leftLong -= 250
      } else if (this.leftLong === -1000) {
        this.leftLong = 0
      }
    },
    handleHover() {
      clearInterval(this.interval)
    },
    handleOut() {
      this.interval = setInterval(this.moveItem, 3000)
    },
    handleMinus() {
      if (this.leftLong !== 0) {
        this.leftLong += 250
      } else if (this.leftLong === 0) {
        this.leftLong = -1000
      }
    },
    handleAdd() {
      if (this.leftLong !== -1000) {
        this.leftLong -= 250
      } else if (this.leftLong === -1000) {
        this.leftLong = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-canvas {
  margin-top: 60px;
  width: 100%;
  height: 500px;
  border-top: 3px solid #c1c1c1;
  position: relative;
  .el-button {
    padding: 30px 10px;
  }
  .buttonLeft {
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -600px;
  }
  .buttonRight {
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: 580px;
  }
}
.lineCanvas {
  position: absolute;
  width: 1000px;
  height: 100%;
  overflow: hidden;
  left: 50%;
  margin-left: -500px;
  margin-top: -10px;
}
.innerCanvas {
  height: 100%;
  width: 2010px;
  margin: 10px;
  position: absolute;
  transition-property: all;
  transition-duration: 0.5s;
}
.itemCanvas {
  transition-duration: 0.5s;
  float: left;
  border-left: 1px solid #c1c1c1;
  width: 250px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  color: #848484;
  .title {
    font-size: 50px;
    line-height: 100px;
  }
  p {
    margin-top: 0px;
    padding-bottom: 50px;
  }
}
.itemCanvas:hover {
  color: black;
  transition-property: color;
  cursor: pointer;
}
.itemCanvas::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #c1c1c1;
  border: 1px solid #c1c1c1;
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 5;
}
.itemCanvas::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #c1c1c1;
  position: absolute;
  bottom: -8px;
  left: -8px;
}
</style>
